<template>
  <PageWrapper>
    <Tabs v-model:tabValue="tabValue" class="tabs capsule_tap" :destroyInactiveTabPane="true">
      <TabPane v-for="(item, index) in navList" :tab="item.label" :key="index">
        <component :is="item.component"
      /></TabPane>
    </Tabs>
  </PageWrapper>
</template>

<script setup lang="ts" name="BuriedPointNocash">
  import { ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { Tabs, TabPane } from 'ant-design-vue';
  import googleBuriedPoint from '@/views/promotion/buriedPoint/components/googleBuriedPoint/index.vue';
  import fbMetaPixel from '@/views/promotion/buriedPoint/components/fbMetaPixel/index.vue';
  import kwaiPixel from '@/views/promotion/buriedPoint/components/kwaiPixel/index.vue';
  import tikTokPixel from '@/views/promotion/buriedPoint/components/tikTokPixel/index.vue';
  import h5Pixel from '@/views/promotion/buriedPoint/components/h5Pixel/index.vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const navList = [
    {
      label: 'Google' + t('table.promotion.promotion_burial_point'),
      key: 1,
      component: googleBuriedPoint,
    },
    {
      label: 'Facebook/Meta Pixel',
      key: 2,
      component: fbMetaPixel,
    },
    {
      label: 'Kwai Pixel',
      key: 3,
      component: kwaiPixel,
    },
    {
      label: 'TikTok Pixel',
      key: 4,
      component: tikTokPixel,
    },
    // {
    //   label: 'H5' + t('table.promotion.promotion_majia_lessons'),
    //   key: 5,
    //   component: h5Pixel,
    // },
  ];
  const tabValue = ref<string>('default');
</script>
<style lang="less" scoped>
  .tabs {
    border-radius: 3px;
    //background-color: @component-background;
  }

  ::v-deep(.ant-tabs-top > .ant-tabs-nav) {
    margin: 0 0 0 4px !important;
  }
</style>
